<!-- 主题活动 operate:market:theme  -->
<template>
  <div class="content">
    <el-form :model="query" ref="searchForm" label-width="100px" size="medium" class="search-form">
      <el-form-item label="" prop="title" label-width="0px">
        <el-input v-model="query.title" placeholder="请输入关键字" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label="" prop="status" label-width="0px">
        <Cselect v-model="query.status" :options="statusList" placeholder="请选择活动状态"></Cselect>
      </el-form-item>
      <el-form-item label="" prop="title" label-width="auto">
        <TimeRangePicker v-model="query.timeRange" type="datetimerange" :needPickerOptions="false" :defaultTime="['00:00:00', nowHMS]"
                         startPlaceholder="开始时间" endPlaceholder="结束时间"></TimeRangePicker>
      </el-form-item>

      <el-form-item label-width="0px">
        <Cbutton @click="handleSearch" size="medium">查询</Cbutton>
        <Cbutton type="info" size="medium" @click="handleReset('searchForm')">重置</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <div class="content-btn">
        <Cbutton @click="handleAdd">添加</Cbutton>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column label="活动名称" prop="title" align="center"></el-table-column>
        <el-table-column label="开始时间" prop="title" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.startTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="title" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.endTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="title" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品数量" prop="productQuantity" align="center"></el-table-column>
        <el-table-column label="当前状态" prop="status" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.statusSwitch" @change="handleSetStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="title" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="text" style="color:rgb(245, 108, 108);" size="medium" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
    </Pagination>
  </div>
</template>

<script>
import { GetMarketList, UpdateMarket, DelMarket } from '@/api/onlineMan'
import { ExportList, ExportStr, NowDateTime } from '@/utils'
import TimeRangePicker from '@/components/DatePicker/TimeRangePicker'
export default {
  name: 'operateMarketTheme',
  components: { TimeRangePicker },
  data () {
    return {
      statusList: ExportList('marketStatus'),
      nowHMS: NowDateTime(),
      originQuery: {},
      query: {
        title: '',
        status: '',
        createTimeSt: '',
        createTimeEn: '',
        timeRange: [],
        pageNum: 1,
        pageSize: 10,
        type: 3 // 1:新人专享 2:今日爆款 3:主题活动,
      },
      tableLoading: false,
      tableList: [],
      totalCount: 0
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      let params = this.getFiltersParams()
      GetMarketList(params).then(res => {
        this.tableLoading = false
        res.data.list.forEach(e => {
          e.statusSwitch = e.status === 1
          e.originstatusSwitch = e.status === 1
        })
        this.tableList = res.data.list
        this.totalCount = res.data.total || 0
      }).catch(e => {
        this.tableLoading = false
      })
    },
    getFiltersParams () {
      let params = {}
      if (this.query.timeRange && this.query.timeRange.length > 1) {
        this.query.createTimeSt = params.createTimeSt = this.query.timeRange[0]
        this.query.createTimeEn = params.createTimeEn = this.query.timeRange[1]
      }
      params.pageNum = this.query.pageNum
      params.pageSize = this.query.pageSize
      params.status = this.query.status
      params.title = this.query.title
      params.type = this.query.type
      // params.orderBy = this.query.orderBy
      // params.sort = this.query.sort
      return params
    },
    handleSearch () {
      this.getList()
    },
    handleReset () {
      this.query = {
        title: '',
        status: '',
        createTimeSt: '',
        createTimeEn: '',
        timeRange: [],
        pageNum: 1,
        pageSize: 10,
        type: 1
      }
    },
    // 状态处理
    handleSetStatus (row) {
      const params = {
        id: row.id,
        status: row.statusSwitch ? 1 : '0'
      }
      UpdateMarket(params).then(res => {
      }).catch(e => {
        if (row) {
          row['statusSwitch'] = row['origin' + 'statusSwitch']
        }
      })
    },
    handleAdd () { this.$router.push({ name: 'operate:market:theme:add' }) },
    handleUpdate (row) { this.$router.push({ name: 'operate:market:theme:edit', query: { id: row.id } }) },
    handleDelete (row) {
      this.$confirm(`确定要删除该主题活动吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DelMarket({ id: row.id }).then(res => {
          this.getList()
          this.$message.success(res.message || '操作成功')
        }).catch(() => { })
      }).catch(() => { })
    },
    dealListStr (key, type) {
      return ExportStr(key, type)
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
